<template>
	<ContentWrap>
		<!-- 搜索工作栏 -->
		<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
			<el-form-item label="支付状态" prop="status">
				<el-select v-model="queryParams.status" placeholder="支付状态" :clearable="true" class="!w-120px">
					<el-option v-for="dict in unionMiniPayStatus" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="下发状态" prop="downMeterFlag">
				<el-select v-model="queryParams.downMeterFlag" placeholder="请选择下发状态" clearable class="!w-120px">
					<el-option v-for="dict in meterDownFlags" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="商品标题" prop="subject">
				<el-input v-model="queryParams.subject" placeholder="请输入商品标题" clearable @keyup.enter.stop="handleQuery" />
			</el-form-item>
			<el-form-item label="订单编号" prop="orderId">
				<el-input v-model="queryParams.orderId" placeholder="请输入订单编号" clearable @keyup.enter.stop="handleQuery" />
			</el-form-item>
			<el-form-item label="房东账户" prop="ownMemberMatCode">
				<el-input v-model="queryParams.ownMemberMatCode" placeholder="请输入房东账户" clearable @keyup.enter.stop="handleQuery" />
			</el-form-item>

			<el-form-item label="时间区间">
				<el-date-picker
					v-model="queryParams.successTime"
					type="daterange"
					:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
					value-format="YYYY-MM-DD HH:mm:ss"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期" />
			</el-form-item>
			<el-form-item>
				<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
				<el-button type="success" plain :loading="exportLoading" @click="handleExport"> <Icon icon="ep:download" />导出</el-button>
			</el-form-item>
		</el-form>
	</ContentWrap>

	<!-- 列表 -->
	<ContentWrap>
		<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
			<el-table-column label="描述" align="left" min-width="320">
				<template #default="scope">
					<div>商品标题：{{ scope.row.subject }}</div>
					<div>
						订单编号：<el-link type="primary" @click="getUnionPayInfo(scope.row)">{{ scope.row.orderId }}</el-link>
					</div>
					<div>
						人员ID：<el-link type="success" @click="getMemberuser(scope.row.memberUserId)">{{ scope.row.memberUserId }}</el-link>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="金额(元)" align="center">
				<el-table-column label="金额" align="left" prop="amount" width="260">
					<template #default="scope">
						<div style="font-weight: bold">支付金额：{{ divide(scope.row.amount, 100) }}</div>
						<div>
							房东分账：{{ divide(scope.row.balance, 100) }} <span v-if="scope.row.refundStatus == 1" style="color: red">退款：{{ divide(scope.row.refundAmount, 100) }}</span>
						</div>
						<div>分账账户：{{ scope.row.ownMemberMatCode }}</div>

						<div>是否分账：{{ scope.row.autoDivisionFlag == 1 ? '是' : '否' }}</div>
					</template>
				</el-table-column>
				<el-table-column label="手续费" align="left" prop="platformFeeRate" width="160">
					<template #default="scope">
						<div>平台手续费：{{ divide(scope.row.platformFeeAmount, 100) }}</div>
						<div>平台百分比：{{ scope.row.platformFeeRate }}%</div>
						<div>银联手续费：{{ divide(scope.row.channelFeeAmount, 100) }}</div>
						<div>银联百分比：{{ scope.row.channelFeeRate }}%</div>
					</template>
				</el-table-column>
			</el-table-column>
			<el-table-column label="状态" align="left" prop="status" width="160">
				<template #default="scope">
					<div>支付状态：<dict-tag :type="DICT_TYPE.UNION_MINI_PAY_STATUS" :value="scope.row.status" /></div>
					<div>下发状态：<dict-tag :type="DICT_TYPE.METER_DOWN_FLAG" :value="scope.row.downMeterFlag" /></div>
				</template>
			</el-table-column>
			<el-table-column label="时间" align="left" prop="expireTime" width="240">
				<template #default="scope">
					<div>创建时间：{{ formatDate(scope.row.createTime) }}</div>
					<div>支付成功：{{ formatDate(scope.row.successTime) }}</div>
					<div>失效时间：{{ formatDate(scope.row.expireTime) }}</div>
				</template>
			</el-table-column>
			<el-table-column label="操作" class-name="fixed-width">
				<template #default="scope">
					<el-button link type="danger" v-if="scope.row.status == 9" @click="handleDelete(scope.row.id)" v-hasPermi="['zwsj:pay-elec-charge:delete']">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="getList" />
	</ContentWrap>
</template>
<script lang="ts" setup>
	import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
	import { formatDate } from '@/utils/formatTime'
	import { divide } from '@/utils/tools'
	import download from '@/utils/download'
	import * as PayElecChargeApi from '@/api/zwsj/payElecCharge'
	import { getUser } from '@/api/member/user/index'
	import { ElNotification } from 'element-plus'

	defineOptions({ name: 'PayElecCharge' })

	const message = useMessage() // 消息弹窗
	const { t } = useI18n() // 国际化

	const loading = ref(true) // 列表的加载中
	const total = ref(0) // 列表的总页数
	const list = ref() // 列表的数据
	const queryParams = reactive({
		pageNo: 1,
		pageSize: 10,
		orderId: null,
		subject: null,
		status: null,
		notifyStatus: null,
		downMeterFlag: null,
		ownMemberMatCode: null,
		successTime: [],
		startDay: undefined,
		endDay: undefined,
	})

	const unionMiniPayStatus = getIntDictOptions(DICT_TYPE.UNION_MINI_PAY_STATUS)
	const meterDownFlags = getIntDictOptions(DICT_TYPE.METER_DOWN_FLAG)

	const queryFormRef = ref() // 搜索的表单

	/** 查询部门列表 */
	const getList = async () => {
		loading.value = true
		try {
			queryParams.successTime = queryParams.successTime || []
			let timeLength = queryParams.successTime.length
			if (timeLength > 0) {
				queryParams.startDay = queryParams.successTime[0] || ''
				if (timeLength > 1) {
					queryParams.endDay = queryParams.successTime[1] || ''
				}
			}
			const data = await PayElecChargeApi.getPayElecChargePage(queryParams)
			list.value = data.list
			total.value = data.total
		} finally {
			loading.value = false
		}
	}

	/** 搜索按钮操作 */
	const handleQuery = () => {
		getList()
	}

	/** 删除按钮操作 */
	const handleDelete = async (id: number) => {
		try {
			// 删除的二次确认
			await message.delConfirm()
			// 发起删除
			await PayElecChargeApi.deletePayElecCharge(id)
			message.success(t('common.delSuccess'))
			// 刷新列表
			await getList()
		} catch {}
	}

	const getUnionPayInfo = async (row: any) => {
		const id = row.id
		const data = await PayElecChargeApi.getUnionMiniPayOrderInfo(id)
		ElNotification({
			title: `订单状态：${data.status}`,
			message: h('i', { style: 'color: teal' }, `订单号：${data.merOrderId}`),
		})
	}

	const getMemberuser = async (memberUserId: number) => {
		const data = await getUser(memberUserId)
		console.info(data)
		ElNotification({
			title: `人员姓名：${data.nickname}`,
			message: h('i', { style: 'color: teal' }, `手机号码：${data.mobile}`),
		})
	}
	/** 导出按钮操作 */
	const exportLoading = ref(false)
	const handleExport = async () => {
		try {
			// 导出的二次确认
			await message.exportConfirm()
			// 发起导出
			exportLoading.value = true
			const data = await PayElecChargeApi.exportPayElecCharge(queryParams)
			console.info(data)
			download.excel(data, '订单数据.xls')
		} catch {
		} finally {
			exportLoading.value = false
		}
	}

	/** 初始化 **/
	onMounted(async () => {
		await getList()
	})
</script>
